<template>
        <div class="title">
          <div id="left">
            御风聊天室
          </div>
          <div id="right">
            <AvatarDropdown
            :src="defaultImg"
            username="John Doe"
            size="50"
            @profile="handleProfile"
            @settings="handleSettings"
            @logout="handleLogout"
          />          </div>
        </div>
</template>
<script lang="ts" setup>
import AvatarDropdown from '@/components/Home/AvatarDropdown .vue';
const defaultImg=require("@/assets/images/avatar1.jpg")
import { logout } from '@/service/user/userService';
const handleProfile = () => {
  console.log('Profile clicked');
};

const handleSettings = () => {
  console.log('Settings clicked');
};

const handleLogout =async () => {
  console.log('Logout clicked');
  await logout();
};
</script>
<style lang="less" scoped>
.title{
  width: 100%;
  display: flex;
  align-items: center;
  padding:0 15px 0 0px;
  justify-content: space-between;
}
</style>